<template>
  <div :class="['StartPanel',showOrHideCls]">
    <div class="view">
      <div class="teseDiv">
        <template v-if="_101Data.data!==null">
          <ul class="ulCls">
            <li v-for="(item,index) in _101Data.data.dataList" :key="index">
              <div class="div">
                <img :src='item.imgUrl' :alt="item.imgAlt" :title="item.imgTitle">
              </div>
            </li>

          </ul>
        </template>
        <div class="title">
          <img src="img/index/t1.png">
        </div>
        <template v-if="_102Data.data!==null">
          <ul class="ulCls">
            <li v-for="(item,index) in _102Data.data.dataList" :key="index">
              <div class="div">
                <img :src='item.imgUrl' :alt="item.imgAlt" :title="item.imgTitle">
              </div>
            </li>

          </ul>
        </template>
        <template v-if="_103Data.data!==null">
          <ul class="ulcai">
            <li v-for="(item,index) in _103Data.data.dataList" :key="index">
              <div class="div">
                <img class="" :src='item.imgUrl' :alt="item.imgAlt" :title="item.imgTitle">
              </div>
            </li>
          </ul>
        </template>
      </div>
      <div class="pingtaiDiv">
        <template v-if="_104Data.data!==null">
          <div class="title">
            <img src="img/index/t3.png">
          </div>
          <ul class="con">
            <li class="item">
              <div class="pages">
                <img :src='item.imgUrl'  v-for="(item,index) in _104Data.data.dataList" :key="index" :alt="item.imgAlt" :title="item.imgTitle">
              </div>
            </li>
          </ul>
        </template>

     </div>
     <div class="pinPaizixDiv">
       <template v-if="_105Data.data!==null">
         <div class="title">
          <img src="img/index/t2.png">
         </div>
         <ul class="ul">
             <li class="li" v-for="(item,index) in  _105Data.data.dataList" :key="index">
               <InformationItemView  :msg="item"></InformationItemView>
             </li>
         </ul>
         <div :class='["maxBtn"]'
              @click="zixMaxBtnClick()"
         >了解更多 +</div>
       </template>

     </div>
     <div class="bottomDiv">
       <img src="img/index/7.png">
     </div>
   </div>
 </div>
</template>


<style scoped>
.StartPanel{

}

.view{
 position: relative;background: #F6F8E3;padding-bottom: 50px;
 width: 100%;/*min-width: 1200px;*/

}
.teseDiv{
 position: relative;width: 100%;
  background-image: url("/public/img/index/bg1.png");
  background-repeat: repeat-y;    padding-bottom: 125px;
}
.teseDiv .title{
  width: 238px;height: 92px;margin: auto;
}
.teseDiv .title img{
  width: 238px;height: 92px;
}

.teseDiv .ulCls{
 position: relative;padding-top:70px;width: 80%;margin: auto;

}
.teseDiv .ulCls li{
 position: relative;padding-bottom: 118px;
}
.teseDiv .ulCls li .div{
 position: relative;
}
.teseDiv .ulCls li .div img{
 width: 100%;
}

.teseDiv .ulcai{
 position: relative;width: 80%;margin: auto;
 display:flex;display: -webkit-flex;flex-direction:row;flex-wrap:wrap;
 justify-content:space-around;
}
.teseDiv .ulcai li{
 position: relative;width: 30%;padding: 10px;

}
.teseDiv .ulcai li .div{
 position: relative;
}
.teseDiv .ulcai li .div img{
 position: relative;width: 100%;
}

.pingtaiDiv{
 position: relative;width: 100%; margin: auto;padding-top: 100px;
  background-image: url("/public/img/index/bg2.png?v=1.0");
  background-repeat: repeat-y;
}
.pingtaiDiv .title{
 position: relative;padding-bottom:100px ;
  width: 596px;height: 92px;margin: auto;
}
.pingtaiDiv .title img{
  width: 596px;height: 92px;
}

.pingtaiDiv .con{
 position: relative;width: 80%;margin: auto;padding-bottom:100px ;
}
.pingtaiDiv .con .item{
 position: relative;
}
.pingtaiDiv .con .item .pages{
 position: relative;width: 100%;
}
.pingtaiDiv .con .item .pages img{
 width: 100%;
}

.pinPaizixDiv{
  background-image: url("/public/img/index/bg1.png");
  background-repeat: repeat-y;    padding-bottom: 100px;padding-top: 100px;
}
.pinPaizixDiv .title{
 position: relative;width: 263px;height: 92px;margin: auto;
}
.pinPaizixDiv .title img{
  width: 263px;height: 92px;
}

.pinPaizixDiv .ul{
 position: relative;width:90%;margin: auto;padding-top: 100px;    padding-bottom: 70px;

}
.pinPaizixDiv .ul .li{
 position: relative;padding-bottom: 30px; max-width: 1200px;    margin: auto;
}
.pinPaizixDiv .maxBtn{
 position: relative;margin: auto;width: 181px;height: 45px;border-radius: 8px;border: 1px solid #0B4727;
 font-size: 18px;color: #0B4727;line-height: 45px;cursor: pointer;
}
.pinPaizixDiv .maxBtn:hover{
  color: #f6f8e3;background: #0b4727;
}
.bottomDiv{
 position: relative;padding-top: 0.3rem;margin: auto;
}
.bottomDiv img{
 width: 100%;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';
import InformationItemView from "@/views/components/InformationItemView";
import Enum from "@/js/Enum";

let store = useStore();
let router = useRouter();
let routerData = useRoute();

//烤肉领导者
let _101Data=reactive({data:null});
//特色菜品竖排
let _102Data=reactive({data:null});
//特色菜品横排
let _103Data=reactive({data:null});
//行页口碑
let _104Data=reactive({data:null});
//品牌咨询
let _105Data=reactive({data:null});
onMounted(() => {
 console.log("StartPanel onMounted 刚进入首页一级页面 初始化",routerData.query.type);
  store.state.channelId=Enum.cId_1;
  window.scrollTo(0, 0);
  getSrsData();




});


onBeforeUnmount(() => {
 console.log('StartPanel onBeforeUnmount');
})
onUnmounted(() => {
 //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
 console.log("StartPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');
let zixMaxBtnClick=()=>{
 console.log("StartPanel zixMaxBtnClick 更多资讯按钮点击");
 store.commit('updatePages',Enum.ppzixuPath);
}
let getSrsData=()=>{
  if(store.state.indexData===null){
    $.ajax({
      url: store.state.data_url+'api/getChannelListById',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"channelId":Enum.cId_1},
      success: function(data) {
        console.log("StartPanel getChannelListById 首页",data);
        store.state.indexData=(data.content.list[0].levelList.length>0?data.content.list[0].levelList:data.content.list[0].datalist);
        //console.log("StartPanel getChannelListById 首页",store.state.indexData);
        setDataHandler();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });
  }else{
    setDataHandler();
  }
}

let setDataHandler=()=>{
  if(_101Data.data===null){
    for(let i=0;i<store.state.indexData.length;i++){
      if(store.state.indexData[i].channelId===102){
        _102Data.data=store.state.indexData[i];
      }
      if(store.state.indexData[i].channelId===103){
        _103Data.data=store.state.indexData[i];
      }
      if(store.state.indexData[i].channelId===104){
        _104Data.data=store.state.indexData[i];
      }
      if(store.state.indexData[i].channelId===105){
        _105Data.data=store.state.indexData[i];
      }
      if(store.state.indexData[i].channelId===101){
        _101Data.data=store.state.indexData[i];
      }
    }
  }
}

</script>




